import 'dart:io';

import 'package:expandable_text/expandable_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:smart_devices/params/spare_part.dart';
import 'package:smart_devices/ui/draw_under_line.dart';
import 'package:smart_devices/ui/image_overlay.dart';
import 'package:smart_devices/ui/scroll_refresh_config.dart';
import 'package:smart_devices/utils/colors.dart';
import 'package:smart_devices/utils/styles.dart';
import 'package:smart_devices/utils/tools.dart';

import 'info_logic.dart';

class SpareInfoView extends GetView<SpareInfoLogic> {
  const SpareInfoView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor:
          ColorsUtils.parseColorFromHexString(ColorsUtils.colorF6f6),
      appBar: AppBar(
        leading: IconButton(
            icon: const Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 15,
            ),
            onPressed: Get.back),
        automaticallyImplyLeading: false,
        backgroundColor:
            ColorsUtils.parseColorFromHexString(ColorsUtils.color0052),
        title: Text(
          '备件详情',
          style: StylesUtils.customTextStyle(
              fontSize: 18, fontWeight: FontWeight.w700),
        ),
        centerTitle: true,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(50),
          child: DrawUnderLine(
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
              child: Container(
                  height: 50,
                  decoration: const BoxDecoration(color: Colors.white),
                  alignment: Alignment.center,
                  child: Obx(() => CupertinoSegmentedControl<int>(
                        onValueChanged: (int value) {
                          controller.controlIndex.value = value;
                          controller.pageController.animateToPage(value,
                              duration: const Duration(milliseconds: 500),
                              curve: Curves.easeIn);
                        },
                        children: {
                          0: Container(
                            width: 168,
                            height: 30,
                            alignment: Alignment.center,
                            child: Text(
                              '备件信息',
                              style: StylesUtils.customTextStyle(
                                  color: getColorByControlIndex(0)),
                            ),
                          ),
                          1: Container(
                            width: 168,
                            height: 30,
                            alignment: Alignment.center,
                            child: Text(
                              '库存明细',
                              style: StylesUtils.customTextStyle(
                                  color: getColorByControlIndex(1)),
                            ),
                          )
                        },
                        borderColor: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.color0052),
                        selectedColor: ColorsUtils.parseColorFromHexString(
                            ColorsUtils.color0052),
                        unselectedColor: Colors.white,
                        padding: EdgeInsets.zero,
                        groupValue: controller.controlIndex.value,
                      )))),
        ),
        elevation: 0,
      ),
      body: PageView(
        physics: const NeverScrollableScrollPhysics(),
        scrollBehavior: const ScrollBehavior(),
        controller: controller.pageController,
        children: [appendInfo(context), appendDetail(context)],
      ),
    );
  }

  Widget appendInfo(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.only(bottom: 50),
      child: Column(
        children: [
          Container(
            margin: const EdgeInsets.only(top: 15),
            color: Colors.white,
            child: ListBody(
              children: [
                SizedBox(
                  height: 40,
                  child: CustomPaint(
                      painter: _MyCustomPaintLine(),
                      child: Container(
                        margin: const EdgeInsets.only(left: 30),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '备件信息',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color6666),
                        ),
                      )),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '备件编码',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            controller.details.value.code,
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '备件名称',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            controller.details.value.name,
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '备件类型',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '${controller.details.value.type?.label}',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '备件单位',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '${SparePartUnitEnum.values.length}个',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '生产厂商',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '天堂电器厂',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  constraints: const BoxConstraints(minHeight: 30),
                  alignment: Alignment.centerLeft,
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      verticalDirection: VerticalDirection.down,
                      children: [
                        Container(
                          width: 100,
                          alignment: Alignment.centerLeft,
                          padding: const EdgeInsets.only(left: 30),
                          child: Text('备注',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333, fontSize: 13)),
                        ),
                        Expanded(
                            child: Container(
                          alignment: Alignment.topLeft,
                          padding: const EdgeInsets.only(right: 15),
                          child: ExpandableText(
                              '睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋睡觉睡到自然醒，数钱数到手抽筋',
                              maxLines: 1,
                              textAlign: TextAlign.left,
                              textDirection: TextDirection.ltr,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.colorAaaa,
                                  fontSize: 13,
                                  lineHeight: 2),
                              onExpandedChanged: (bool flag) {},
                              collapseText: '收起',
                              expandText: '展开'),
                        ))
                      ]),
                )
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 15),
            color: Colors.white,
            child: ListBody(
              children: [
                SizedBox(
                  height: 40,
                  child: CustomPaint(
                      painter: _MyCustomPaintLine(),
                      child: Container(
                        margin: const EdgeInsets.only(left: 30),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '备件库存',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color6666),
                        ),
                      )),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '库存上线',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '1000',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '库存下线',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '50',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '总库存',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '500',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '库存金额',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '6078',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 50,
                  child: Row(
                    children: [
                      Container(
                        width: 100,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 30),
                        child: Text(
                          '更换周期',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '1月',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 15),
            color: Colors.white,
            child: ListBody(
              children: [
                SizedBox(
                  height: 40,
                  child: CustomPaint(
                      painter: _MyCustomPaintLine(),
                      child: Container(
                          margin: const EdgeInsets.only(left: 30),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '设备图片',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color6666),
                          ))),
                ),
                Container(
                  decoration: const BoxDecoration(color: Colors.white),
                  alignment: Alignment.centerLeft,
                  padding:
                      const EdgeInsets.only(left: 15, right: 15, bottom: 20),
                  child: Wrap(
                    spacing: 10,
                    runSpacing: 10,
                    children: controller.imgs
                        .map((element) => element.path.isNotEmpty
                            ? CircleAvatar(
                                radius: 25,
                                backgroundImage: NetworkImage(element.path),
                                backgroundColor:
                                    ColorsUtils.parseColorFromHexString(
                                        '#006775'),
                              )
                            : ImageOverlay(
                                image: FileImage(File(element.path)),
                                width: 50,
                                height: 50,
                                borderRadius: BorderRadius.circular(25)))
                        .toList(),
                  ),
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 15),
            color: Colors.white,
            child: ListBody(
              children: [
                SizedBox(
                  height: 40,
                  child: CustomPaint(
                      painter: _MyCustomPaintLine(),
                      child: Container(
                          margin: const EdgeInsets.only(left: 30),
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '关联文档',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color6666),
                          ))),
                ),
                ...controller.files
                    .map((element) => Container(
                        height: 40,
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.symmetric(horizontal: 10),
                        child: Row(
                          children: [
                            Container(
                              width: 40,
                              alignment: Alignment.center,
                              margin: const EdgeInsets.only(right: 10),
                              child: Image(
                                width: 25,
                                height: 25,
                                image: ToolsUtils.getFileIconByFilename(
                                    element.name),
                              ),
                            ),
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                element.name,
                                overflow: TextOverflow.ellipsis,
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color0052),
                              ),
                            )
                          ],
                        )))
                    .toList(),
              ],
            ),
          )
        ],
      ),
    );
  }

  String getColorByControlIndex(int i) {
    return i == controller.controlIndex.value
        ? ColorsUtils.colorFfff
        : ColorsUtils.color0052;
  }

  Widget appendDetail(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 45,
          margin: const EdgeInsets.only(top: 15, right: 10, left: 10),
          decoration: BoxDecoration(
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF3f3),
              border: Border.all(
                  color: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.colorD7d7))),
          child: Row(
            children: [
              Expanded(
                  child: Center(
                child: Text(
                  '编号',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              )),
              Container(
                width: 100,
                alignment: Alignment.center,
                child: Text(
                  '仓库名称',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              ),
              Container(
                width: 100,
                alignment: Alignment.center,
                child: Text(
                  '库存',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              ),
              Container(
                width: 100,
                alignment: Alignment.center,
                child: Text(
                  '存放位置',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              )
            ],
          ),
        ),
        Expanded(child: scrollRefreshConfig(context))
      ],
    );
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: controller.refreshController,
      onRefresh: controller.onRefresh,
      onLoading: controller.onLoading,
      child: listViewBuilder(context),
    );
  }

  Widget listViewBuilder(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return Container(
          margin: const EdgeInsets.symmetric(horizontal: 10),
          decoration: BoxDecoration(
              color: index % 2 == 0
                  ? Colors.white
                  : ColorsUtils.parseColorFromHexString(ColorsUtils.colorF3f3),
              border: Border(
                  left: BorderSide(
                      color: ColorsUtils.parseColorFromHexString(
                          ColorsUtils.colorD7d7)),
                  right: BorderSide(
                      color: ColorsUtils.parseColorFromHexString(
                          ColorsUtils.colorD7d7)),
                  bottom: BorderSide(
                      color: ColorsUtils.parseColorFromHexString(
                          ColorsUtils.colorD7d7)))),
          child: Row(
            children: [
              Expanded(
                  child: Center(
                child: Text(
                  '${index + 1}',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              )),
              Container(
                width: 100,
                alignment: Alignment.center,
                child: Text(
                  controller.pageList[index].name,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              ),
              Container(
                width: 100,
                alignment: Alignment.center,
                child: Text(
                  '${controller.pageList[index].inventory}',
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              ),
              Container(
                width: 100,
                alignment: Alignment.center,
                child: Text(
                  controller.pageList[index].location,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style:
                      StylesUtils.customTextStyle(color: ColorsUtils.color4950),
                ),
              )
            ],
          ),
        );
      },
      itemCount: controller.pageList.length,
      itemExtent: 40,
    );
  }
}

class _MyCustomPaintLine extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    /// w = 10, h = 20
    Paint paint = Paint()
      ..isAntiAlias = false
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color0052)
      ..style = PaintingStyle.fill;
    Rect rect = const Rect.fromLTWH(10, 10, 10, 20);
    canvas.drawRect(rect, paint);

    Offset p1 = Offset(0, size.height);
    Offset p2 = Offset(size.width, size.height);

    canvas.drawLine(
        p1,
        p2,
        paint
          ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4));
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
